<template>
    <div id="app">
        <div id="container">
            <div id="header">
            </div>
          <div id="navigation">
            <ul>
              <li class="selected"></li>
              <li><a href="index.html">首页</a></li>
              <li><a href="jieshao.html">系统介绍</a></li>
              <li><a href="zhinan.html">审报指南</a></li>
              <li><a href="login.html">项目申报</a></li>
              <li><a href="lianxi.html">联系我们</a></li>
              <li></li>
            </ul>
          </div>
          <div id="content">
                    <h2><strong>欢迎使用项目申报系统</strong></h2>
                    <div class="splitcontentleft">
                      <div class="box">
                        <img :alt="item" src="@/assets/images/lxrycyy.gif" width="190" height="130"/>
                      </div>
                    </div>

                    <div class="splitcontentright">
                    <p>项目申报管理系统开发成本低，投入资金少。可以使项目申报的各项管理工作， 变得方便快捷，不仅节省了时间，还节省了人力，提高了准确性。项目管理部门通过自己的网站，能够大大提高工作的透明度以及工作效率。</p>

                    <p><strong>Good luck with your new design!</strong></p>
                    </div>
            </div>
          <div id="subcontent">
              <div class="small box">
              <el-form ref="form" :model="user" label-width="45px">
                <el-form-item label="帐号:">
                  <el-input v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码:">
                  <el-input v-model="user.password" type="password"></el-input>
                </el-form-item>
                <el-input v-model="code" size="small" @blur="check()" placeholder="请输入验证码"></el-input>
                <div align="center">
                <el-image @click="getUrl()" style="width: 100px; height: 50px;" :src="url"
                          :fit="fit"></el-image>
                </div>
                <el-form-item>
                  <el-button type="primary" @click="login()">登录</el-button>
                </el-form-item>
              </el-form>
              </div>
              <!--                             git测试    -->
            </div>
          <div id="footer">
              <p><a href="http://www.ascenttech.com.cn/" target="_blank">版权所有：北京亚思晟商务科技有限公司 &copy;2004-2008|京ICP备05005681</a>
              </p>
            </div>

        </div>
    </div>
</template>

<script>
import axios from '../utils/Myaxios.js'
// import router from "@/router";

const options = {
    data() {
        return {
            fit: 'scale-down',
            code: "",
            // username: "",
            // password: "",
            url: '',
            user: {
                username: '',
                password: ''
            }
        }
    },
    mounted() {
        this.getUrl()
    },
    methods: {
        login() {
            // const _this = this;
            const _axios = axios.create({
                baseURL: 'http://localhost:8080',
                withCredentials: true
            })
            _axios.post('/users/login', {}, {
                params: {
                    username: this.user.username,
                    password: this.user.password
                }
            }).then(
                (resp) => {
                    // console.log(resp)
                    if (resp.data.data == null) {
                        alert("用户为空");
                    }
                    if (resp.data.data.gid == 1) {
                        //跳转到gid为1页面
                        this.$router.push(
                            {
                                path: '/admin'
                            }
                        )


                    } else if (resp.data.data.gid == 2) {
                        //跳转到gid为2页面
                        this.$router.push(
                            {
                                path: '/expert',
                                query: {
                                    uid: resp.data.data.uid,
                                }
                            }
                        )
                    } else if (resp.data.data.gid == 3) {

                        //跳转到gid为3页面
                        this.$router.push(
                            {
                                path: '/unit',
                                query: {
                                    uid: resp.data.data.uid,
                                }
                            }
                        )
                    }
                }
            )
        },
        async getUrl() {
            const _axios = axios.create({
                baseURL: 'http://localhost:8080',
                withCredentials: true
            })
            const resp = await _axios.get('/codes/getCode', {
                responseType: 'arraybuffer'
            });
            // eslint-disable-next-line no-unused-vars
            const { headers: { randomstr = '' } } = resp
            this.url = 'data:image/png;base64,' + btoa(new Uint8Array(resp.data)
                .reduce((data, byte) => {
                    // btoa创建一个base-64编码的字符串
                    return data + String.fromCharCode(byte)
                    // fromCharCode 可接受一个指定的Unicode,然后返回一个字符串
                }, ''))
        },
        async check() {
            const _axios = axios.create({
                baseURL: 'http://localhost:8080',
                withCredentials: true
            })
            const resp = await _axios.get('/codes/checkCode', {
                params: { code: this.code }
            })

            console.log(resp.data)
        },


    }

}
export default options;
</script>


<style>
@import '../assets/static/andreasblue.css';
</style>